<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.8.0/styles/base16/atelier-seaside-light.min.css"
    rel="stylesheet">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/marked/13.0.2/marked.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="pt-4 mb-4 text-center">
      <h2 id="title"></h2>
      <p id="created"></p>
    </div>
    <div id="code-box"></div>
  </div>
</body>
<script type="module">
  import { readTextFile, initHighlight } from '../js/common.js'
  import { pages } from '../model/pages.js'

  window.onload = async () => {
    let params = new URL(location.href).searchParams;
    let id = params.get('id');
    let article = pages.filter(item => item.id == id)[0];

    document.querySelector('#title').innerHTML = article.title;
    document.querySelector('#created').innerHTML = article.created;

    var content = await readTextFile(`${id}.md`)
    const codeBox = document.querySelector('#code-box');
    codeBox.innerHTML = marked.parse(content);
    initHighlight();
  }
</script>
<!-- <script type="module" src="../js/common.js"></script> -->

</html>